<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<div fxLayout="row">
    <div fxFlex fxLayoutAlign="center center" *ngIf="showTimeSelector">
        <button
            mat-icon-button
            color="accent"
            (click)="applyPreviousInterval()"
        >
            <i class="material-icons">navigate_before</i>
        </button>
        <button
            mat-button
            color="accent"
            [matMenuTriggerFor]="menu"
            #menuTrigger="matMenuTrigger"
            [matTooltip]="labels.timeRangeSelectorTooltip"
            data-cy="time-selector-menu"
            (menuClosed)="menuTrigger.closeMenu()"
        >
            <div
                *ngIf="timeStringMode === 'advanced'"
                class="formatted-datetime"
            >
                <span class="formatted-date">{{ timeString.startDate }}</span>
                <span *ngIf="enableTimePicker">
                    &nbsp;<span class="formatted-time">{{
                        timeString.startTime
                    }}</span>
                </span>
                <div *ngIf="enableTimePicker || !timeString.sameDay">
                    <span class="formatted-date">&nbsp;-&nbsp;</span>
                    <span class="formatted-date">{{ timeString.endDate }}</span>
                    <span *ngIf="enableTimePicker">
                        &nbsp;<span class="formatted-time">{{
                            timeString.endTime
                        }}</span>
                    </span>
                </div>
            </div>
            <div class="formatted-datetime" *ngIf="timeStringMode === 'simple'">
                {{ simpleTimeString }}
            </div>
        </button>
        <button mat-icon-button color="accent" (click)="applyNextInterval()">
            <i class="material-icons">navigate_next</i>
        </button>

        <mat-menu #menu="matMenu" fxFlex="100" class="large-menu">
            <sp-time-selector-menu
                #timeSelectorMenu
                [timeSettings]="timeSettings"
                [labels]="labels"
                (timeSettingsEmitter)="applyCurrentDateRange($event)"
                [quickSelections]="quickSelections"
                [enableTimePicker]="enableTimePicker"
                [maxDayRange]="maxDayRange"
                class="w-100"
            >
            </sp-time-selector-menu>
        </mat-menu>
    </div>
    <div fxLayoutAlign="end center">
        <button
            mat-icon-button
            matTooltip="Refresh"
            color="accent"
            (click)="updateTimeSettingsAndReload()"
        >
            <mat-icon>refresh</mat-icon>
        </button>
    </div>
    <div fxLayoutAlign="end center">
        <sp-data-explorer-refresh-interval-settings-component
            #refreshIntervalSettings
            *ngIf="liveSettings && showIntervalSettings"
            [liveSettings]="liveSettings"
            (intervalSettingsChangedEmitter)="
                intervalSettingsChangedEmitter.emit($event)
            "
            [availableOptions]="availableOptions"
        >
        </sp-data-explorer-refresh-interval-settings-component>
    </div>
</div>
